<template>
  <div>
    <h4 class="text-center mt-3">搜索结果</h4>

    <!-- 没有数据页面 -->
    <div v-if="notData">
      <h3>{{ tip }}</h3>
    </div>

    <div v-for="(item, idx) in bookList" :key="item.id">
      <div class="d-flex" style="margin: 20px 0">
        <img v-lazy="item.imgUrl" class="mr-3" alt="" />

        <div
          class="d-flex flex-column justify-content-between"
          style="height: 200px"
        >
          <router-link :to="'/detail/' + item.id">{{ item.title }}</router-link>
          <div>
            <span style="color: #e23100">￥{{ realPrice(item) }}</span>
            &nbsp;&nbsp;定价:
            <span style="color: #aaa; font-size: 12px"
              ><del
                ><em>{{ parseFloat(item.price).toFixed(2) }}</em></del
              ></span
            >
          </div>
          <div>
            {{ item.author }} / {{ item.publishDate }} / {{ item.bookConcern }}
          </div>
          <div>
            {{ item.brief }}
          </div>
          <button
            @click="addCart(idx)"
            class="btn btn-danger"
            style="width: 110px"
          >
            加入购物车
          </button>
        </div>
      </div>
      <hr />
    </div>

    <nav v-show="showPagination" aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item" :class="{ disabled: current == 1 }">
          <a
            class="page-link"
            @click.prevent="page(current - 1)"
            href="javascript:void(0);"
            >Previous</a
          >
        </li>

        <li
          v-for="(item, idx) in pageCount"
          :key="idx"
          :class="{ active: idx + 1 == current }"
          class="page-item"
        >
          <a
            class="page-link"
            @click.prevent="page(idx + 1)"
            href="javascript:void(0);"
            >{{ idx + 1 }}</a
          >
        </li>
        <li class="page-item" :class="{ disabled: current == pageCount }">
          <a
            class="page-link"
            @click.prevent="page(current + 1)"
            href="javascript:void(0);"
            >Next</a
          >
        </li>
      </ul>
    </nav>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      bookList: [],
      //   是否显示分页按钮
      showPagination: false,
      //   分页总数
      pageCount: 1,
      //   当前页数
      current: 1,
      //   每页数
      pageSize: 2,
      //   搜索关键字
      wd: "",
      // 没有数据时的提示
      tip: "",
      // 是否有数据
      notData: false,
    };
  },
  methods: {
    addCart(idx) {
      let newItem = { ...this.bookList[idx] };
      newItem.quantity = 1;
      newItem.price = this.realPrice(newItem);
      this.pushCarList({ ...newItem });
    },
    realPrice(item) {
      return parseFloat(item.price * item.discount).toFixed(2);
    },
    getbookList() {
      // 原
      // this.axios
      //   .get(
      //     `/api/search?wd=${this.wd}&pageNum=${this.current}&pageSize=${this.pageSize}`
      //   )
      //   .then((res) => {
      //     console.log(res);
      //     if (res.data.code == 200) {
      //       this.bookList = res.data.data;
      //       let total = res.data.total;
      //       if (total == 0) {
      //         this.tip = "没有搜索到匹配的图书！";
      //         this.notData = true;
      //       }
      //       if (total > 2) {
      //         this.showPagination = true;
      //         this.pageCount = Math.ceil(total / 2.0);
      //       } else {
      //         this.showPagination = false;
      //       }
      //     }
      //   });

      this.axios
        .get(
          `/api/book/search?wd=${this.wd}&page=${this.current}&pageSize=${this.pageSize}`
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.bookList = res.data.data.data;
            let total = res.data.data.total;
            if (total == 0) {
              this.tip = "没有搜索到匹配的图书！";
              this.notData = true;
            }
            if (total > 2) {
              this.showPagination = true;
              this.pageCount = Math.ceil(total / 2.0);
            } else {
              this.showPagination = false;
            }
          }
        });
    },
    page(pageNum) {
      this.current = pageNum;
      this.getbookList();
    },
    ...mapMutations(["pushCarList"]),
  },
  created() {
    let wd = this.$route.params.wd;
    if (wd == undefined) {
      wd = "";
    }
    console.log(wd);
    this.wd = wd;
    this.getbookList();
  },
  watch: {
    $route(to, form) {
      if (to.params.wd != form.params.wd) {
        this.wd = to.params.wd;
        this.getbookList();
      }
    },
  },
};
</script>
